<template>
  <div>
    <p style="font-size:36px">商品管理</p>
    <el-card>
      <el-table border :data="userList" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="username" label="用户名" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="phone" label="电话" width="180"></el-table-column>
        <el-table-column prop label="注册时间" width="180">
          <template slot-scope="scope">{{ scope.row.createTime | dataFormate }}</template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <pagination :total='total' @changeNum='changeNum' @changeSize='changeSize'></pagination>
    </el-card>
  </div>
</template>

<script>
import { userList } from "../util/http";
import pagination from '../components/pagination'
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {
      pagination
  },
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 5
      },
      userList: [],
      total: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getUserList() {
      const { data: res } = await userList(
        `/api/manage/user/list.do?pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`
      );
      if (res.status !== 0) return this.$message.error(res.msg);
      this.userList = res.data.list;
      this.total = res.data.total;
      this.$message.success("获取数据成功");
      console.log(res);
    },
    changeNum(val){
      this.queryInfo.pageNum = val;
      this.getUserList();
    },
    changeSize(val){
        this.queryInfo.pageSize = val
        this.getUserList();
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.getUserList();
  }
};
</script> 
<style scoped>
</style>
